<template>
    <div class="heart" :class=" aixin ? 'is-active': '' "></div>
</template>
<script>
export default {
    props:['aixin'],
    watch: {
    aixin:{
    handler(newVal) {
          if(newVal){
            setTimeout(() => {
            this.$emit("changeaixin", false)
          },1200)
        }
      },   
    immediate:true
    }
  }
}
</script>
<style lang="less" scoped>
.heart {
    width: 100px;
    height: 100px;
    background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
    background-position: 0 0;
    opacity: 0;
}
.is-active {
    opacity: 1;
    background-position: -2800px 0;
    transition: background-position 1s steps(28);
}
</style>